<template>
  <div>
    <counter-result :result="result"></counter-result>
    <div>
      <!-- @compute="compute" -->
      <counter-button
        innerText="+"
        action="PLUS"
        @dispatch="dispatch"
      ></counter-button>
      <counter-button
        innerText="-"
        action="MINUS"
        @dispatch="dispatch"
      ></counter-button>
    </div>
  </div>
</template>

<script>
import CounterResult from "./Result.vue";
import CounterButton from "./Button.vue";

//导入派发器
import dispatch from "../../dispatchers/counter";

export default {
  name: "Counter",
  components: {
    CounterResult,
    CounterButton,
  },
  data() {
    return {
      result: 0,
    };
  },
  methods: {
    //vue2.x 逻辑的编写区域
    // compute(action) {
    //   switch (action) {
    //     //plus / minus
    //     case "PLUS":
    //       this.result = this.result + 1;
    //       break;
    //     case "MINUS":
    //       this.result = this.result - 1;
    //     default:
    //       break;
    //   }
    // },

    //派发器的占位
    dispatch(...args) {
      //传入实例，执行器上下文
      //传入参数再执行
      dispatch(this)(...args);
    },
  },
};
</script>

